<template>
  <div class="dialog-box">
    <t-dialog
      :visible="props.visible"
      header="选择模块样式"
      :confirm-on-enter="true"
      :on-cancel="onCancel"
      :on-close="close"
      :on-confirm="ok"
      :cancelBtn="null"
      :confirmBtn="null"
    >
      <template #body>
        <div class="contents">
          <div class="contents-left">
            <div
              v-for="item in tabList"
              :key="item.id"
              @click="setCruuent(item.id)"
              class="item-box hw-click-cursor"
              :class="{ 'item-box-active': item.id == cruuent }"
            >
              {{ item.name }}
            </div>
          </div>
          <div class="contents-right" id="contents-right">
            <t-radio-group v-model="ids" @change="onChange" style="width: 100%">
              <div class="right-item" :id="`content-1`" @mouseenter="mouseenter(1)" v-if="moduleList.preface">
                <div class="content-item">
                  <p class="item-title1">图文模块</p>
                  <span class="item-title2">通常用于「前言」「结语」等图文模块</span>
                </div>

                <t-row :gutter="24" style="width: 100%">
                  <t-col :span="4" v-for="item in moduleList.preface" :key="item.id">
                    <div
                      :class="{ 'active-radio': ids == item.id }"
                      @click="ids = item.id"
                      class="col-item hw-box-style-flex hw-box-style-flex-clm hw-box-style-flex-r-center"
                    >
                      <div class="pd-box">
                        <img :src="item.img + '?imageView2/2/w/256/format/webp'" alt="" class="block_15 flex-col" />
                      </div>
                      <div class="radio-check hw-flex-style-c-c">
                        <span>{{ item.name }}</span>
                        <img
                          v-if="ids == item.id"
                          class="item-active"
                          src="//static.jiyi.show/assets/img/active.png"
                          alt=""
                        />
                      </div>
                    </div>
                  </t-col>
                </t-row>
              </div>
              <div class="right-item" :id="`content-2`" @mouseenter="mouseenter(2)">
                <div class="content-item">
                  <p class="item-title1">子单元模块</p>
                  <span class="item-title2">用于单元下的模块，根据子单元数量加载样式</span>
                </div>
                <div class="isnull" v-if="props.unitList.length == 0">暂无可选单元模块</div>
                <t-row :gutter="24" style="width: 100%">
                  <t-col @click="ids = item.id" :span="4" v-for="item in props.unitList" :key="item.id">
                    <div
                      :class="{ 'active-radio': ids == item.id }"
                      class="col-item hw-box-style-flex hw-box-style-flex-clm hw-box-style-flex-r-center"
                    >
                      <div class="pd-box">
                        <img :src="item.img + '?imageView2/2/w/256/format/webp'" alt="" class="block_15 flex-col" />
                      </div>
                      <div class="radio-check hw-flex-style-c-c">
                        <span>{{ item.name }}</span>
                        <img
                          v-if="ids == item.id"
                          class="item-active"
                          src="//static.jiyi.show/assets/img/active.png"
                          alt=""
                        />
                      </div>
                    </div>
                  </t-col>
                </t-row>
              </div>

              <div class="right-item" :id="`content-3`" @mouseenter="mouseenter(3)" v-if="moduleList.exhihits">
                <div class="content-item">
                  <p class="item-title1">展品模块</p>
                  <span class="item-title2">通常用于单元下展品模块</span>
                </div>
                <div class="isnull" v-if="props.showpieceTotal < 2 || props.unitList.length > 0">暂无可选展品模块</div>
                <t-row :gutter="24" style="width: 100%" v-else>
                  <t-col @click="ids = item.id" :span="4" v-for="item in moduleList.exhihits" :key="item.id">
                    <div
                      :class="{ 'active-radio': ids == item.id }"
                      class="col-item hw-box-style-flex hw-box-style-flex-clm hw-box-style-flex-r-center"
                    >
                      <div class="pd-box">
                        <img :src="item.img + '?imageView2/2/w/256/format/webp'" alt="" class="block_15 flex-col" />
                      </div>
                      <div class="radio-check hw-flex-style-c-c">
                        <span>{{ item.name }}</span>
                        <!-- <t-radio :value="item.id" 
                          ><span class="radio-text">{{ item.name }}</span></t-radio
                        > -->
                        <img
                          v-if="ids == item.id"
                          class="item-active"
                          src="//static.jiyi.show/assets/img/active.png"
                          alt=""
                        />
                      </div>
                    </div>
                  </t-col>
                </t-row>
              </div>
            </t-radio-group>
          </div>
        </div>
      </template>
      <template #footer>
        <div class="footer">
          <t-button @click="close" theme="default" variant="outline">取消</t-button>
          <t-button @click="ok">确定</t-button>
        </div>
      </template>
    </t-dialog>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { moduleType, moduleType4 } from '../data';
import { urls } from '@/utils/request/upload';
import { ref, reactive, getCurrentInstance, computed, watch } from 'vue';
import { dialogTab, dialogTab4 } from '../data';
import { useRoute } from 'vue-router';

const route = useRoute();
const tabList = ref([]);
const cruuent = ref(1);
const moduleList = ref([]);
let ids = ref(0);
const props = defineProps({
  visible: {
    type: Boolean,
  },
  value2: {
    type: Number,
  },
  unitList: {
    type: Array,
  },
  showpieceTotal: {
    type: Number,
  },
});
const init = () => {
  // console.log('templateId', route.meta.templateId);

  switch (route.meta.templateId) {
    case 410276336631877:
      tabList.value = dialogTab4;
      moduleList.value = moduleType4;
      break;

    default:
      tabList.value = dialogTab;
      moduleList.value = moduleType;
      break;
  }
};
init();
const emit = defineEmits(['close', 'ok']);
ids.value = props.value2;
// console.log(ids.value);
watch(
  () => props.value2,
  () => {
    ids.value = props.value2;
  },
  { immediate: true },
);
const close = () => {
  emit('close');
};
const ok = () => {
  emit('ok', ids.value);
};
const mouseenter = (e: number) => {
  cruuent.value = e;
  // console.log(e);
};
const onChange = (checkedValues) => {
  // console.log('checkedValues:', ids.value, checkedValues);
};
const onCancel = () => {};
const setCruuent = (e: any) => {
  cruuent.value = e;
  let ele = document.getElementById(`content-${e}`);
  ele.scrollIntoView({ behavior: 'smooth' });
};
</script>

<style lang="less" scoped>
.dialog-box {
  :deep(.t-dialog--default) {
    padding: 0 !important;
  }
  :deep(.t-dialog) {
    width: 1160px !important;
    background: #3e3c3b;
    border-radius: 8px;
  }
  :deep(.t-dialog__header-content) {
    padding: 18px 32px;
    color: #ffffff;
  }
  :deep(.t-dialog__header) {
    height: 64px;
  }
  :deep(.t-dialog__body) {
    padding: 0;
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
    ::-webkit-scrollbar {
      display: none; /* Chrome Safari */
    }
    overflow-x: hidden;
  }
  :deep(.t-dialog__footer) {
    padding: 0;
    background: #343231;
    box-shadow: inset 0px 1px 0px 0px #3e3c3b;
  }

  :deep(.t-dialog__close) {
    padding-left: -32px;
    color: #ffffff;
  }
  :deep(.t-dialog__header) {
    padding-right: 32px;
    box-shadow: inset 0px -1px 0px 0px #3e3c3b;
  }
}

.contents {
  display: flex;
  width: 100%;
  height: 614px;
}
.footer {
  padding: 16px 32px;
  // box-shadow: inset 0px 1px 0px 0px rgba(230, 230, 230, 0.5);
}
.contents-left {
  width: 200px;
  height: 100%;
  padding: 8px;
  overflow-y: auto;

  background: #343231;
}
.contents-right {
  flex: 1;
  height: 100%;
  overflow-y: auto;
  padding: 24px 32px;
  background: RGBA(62, 60, 59, 1);
  // box-shadow: inset 1px 0px 0px 0px rgba(230, 230, 230, 0.5);
}
.contents-right::-webkit-scrollbar {
  display: none;
}
.item-box {
  width: 100%;
  padding: 12px 24px;
  border-radius: 4px;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #fff;
  line-height: 24px;
}
.item-box-active {
  background: #3e3c3b;
  box-shadow: inset -1px 0px 0px 0px #343231;
}
.right-item {
  width: 100%;
  //   height: 420px;
  margin-bottom: 24px;
}
.content-item {
  display: flex;
  align-items: flex-end;
}
.item-title1 {
  color: #fff;
  line-height: 28px;
  font-size: 18px;
}
.item-title2 {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.38);
  margin-left: 8px;
  //   line-height: 22px;
}
.graphicModule-box {
  width: 100%;
}
.block_15 {
  width: 100%;
  height: auto;
  max-height: 172px;
  margin-bottom: 12px;
}
.radio-text {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 24px;
}
.pd-box {
  display: flex;
  align-items: center;
  padding: 12px;
  width: 100%;
  height: 192px;
}
.radio-check {
  position: relative;
  width: 100%;
  height: 40px;
  box-shadow: inset 0px 1px 0px 0px #3e3c3b;

  // border-top: 1px solid rgba(230, 230, 230, 0.5);
  span {
    font-size: 16px;
    font-weight: 400;
    color: #ffffff;
    line-height: 24px;
  }
  .item-active {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 32px;
    height: 32px;
  }
}
.col-item {
  background: #4a4847;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  border: 1px solid transparent;
}
.isnull {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 16px;
  font-size: 18px;
  font-weight: 600;
}
.active-radio {
  border: 1px solid #d2ad77;
}
:deep(.t-dialog) {
  border: none;
}
</style>
